<template>
	<view class="body">
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="优惠券名称" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="优惠券名称" />
			</uni-forms-item>
			<uni-forms-item label="优惠券类型" name="type">
				<uni-data-checkbox v-model="formData.type" :localdata="type"></uni-data-checkbox>
			</uni-forms-item>
			<uni-forms-item label="" name="youhui">
				<view class="full_reduction" v-if="formData.type=='满减券'">
					满<view class="">
						<uni-easyinput :clearable='false' :inputBorder="false" :style="discountStyle" type="text"
							v-model.number="formData.triggerMoney" />
					</view>元减
					<view class="">
						<uni-easyinput :clearable='false' :inputBorder="false" :style="discountStyle" type="text"
							v-model.number="formData.preferentialMoney" />
					</view>元
				</view>
				<view class="discount" v-else="formData.type!='满减券'">
					打<view class=""><uni-easyinput :clearable='false' :inputBorder="false" :style="discountStyle"
							type="text" v-model.number="formData.discount" /></view>折
				</view>
			</uni-forms-item>
			<uni-forms-item label="发放开始时间" name="start">
				<view class="start_time">
					<uni-datetime-picker v-model="formData.start"></uni-datetime-picker>
				</view>
			</uni-forms-item>
			<uni-forms-item label="发放结束时间" name="end">
				<view class="end_time">
					<uni-datetime-picker v-model="formData.end"></uni-datetime-picker>
				</view>
			</uni-forms-item>
			<uni-forms-item label="投放数量" name="num">
				<uni-easyinput type="text" v-model.number="formData.num" placeholder="请输入投放数量" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit">确认投放</button>
	</view>
</template>

<script>
	export default {
		data() {
			var checkName = (rule, value, data, callback) => {
				if (!value) {
					return callback(new Error('名称不能为空'));
				} else if (value.size > 15) {
					return callback(new Error('名称不能超过15个字符'));
				}
				callback();
			};
			var checkDiscount = (rule, value, data, callback) => {
				if (this.formData.type == "满减券") {
					callback();
				}
				console.log(value);
				console.log(value > "1");
				console.log(value);
				if (!value) {
					return callback(new Error('折扣不能为空'));
				} else if (!Number.isInteger(value)) {
					return callback(new Error('请输入数字值'));
				} else if (value < "1" || value > "10") {
					return callback(new Error('请输1-10之间的数字'));
				}
				callback();
			};
			var checkTriggerMoney = (rule, value, data, callback) => {
				if (this.formData.type == "折扣券") {
					callback();
				}
				if (!value) {
					return callback(new Error('金额不能为空'));
				} else if (!Number.isInteger(value)) {
					return callback(new Error('请输入数字值'));
				} else if (value <= 0 || value > 999999) {
					return callback(new Error('请输合理金额'));
				}
				callback();
			};
			var checkPreferentialMoney = (rule, value, data, callback) => {
				if (this.formData.type == "折扣券") {
					callback();
				}
				if (!value) {
					return callback(new Error('金额不能为空'));
				} else if (!Number.isInteger(value)) {
					return callback(new Error('请输入数字值'));
				} else if (value <= 0 || value > 999999) {
					return callback(new Error('请输合理金额'));
				} else if (value > this.formData.triggerMoney) {
					return callback(new Error('金额不能大于满减金额'));
				}
				callback();
			};
			var checkStart = (rule, value, data, callback) => {
				if (!value) {
					return callback(new Error('开始时间不能为空'));
				}
				callback();
			};
			var checkEnd = (rule, value, data, callback) => {
				var start = new Date(this.formData.start).getTime();
				var end = new Date(value).getTime();
				if (!value) {
					return callback(new Error('结束时间不能为空'));
				} else if (start > end) {
					return callback(new Error('结束时间不能早于开始时间'));
				}
				callback();
			};
			var checkNum = (rule, value, data, callback) => {
				if (!value && value != 0) {
					return callback(new Error('数量不能为空'));
				} else if (!Number.isInteger(value)) {
					return callback(new Error('请输入数字值'));
				} else if (value < 0 || value > 100000) {
					return callback(new Error('请输1-100000之间的数字'));
				}
				callback();
			};
			return {
				formData: {
					'type': "满减券",
					'mid': getApp().globalData.shop.id,
				},
				//优惠券分类
				type: [{
					text: '满减券',
					value: '满减券'
				}, {
					text: '折扣券',
					value: '折扣券'
				}],
				discountStyle: {
					'width': '170rpx',
					'text-align': 'center',
					'border-bottom': '2rpx solid #000'
				},
				//规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入名称',
						}, {
							validateFunction: checkName
						}]
					},
					discount: {
						rules: [{
							required: true,
							errorMessage: '折扣不能为空',
						}, {
							validateFunction: checkDiscount
						}]
					},
					triggerMoney: {
						rules: [{
							required: true,
							errorMessage: '满减金额不能为空',
						}, {
							validateFunction: checkTriggerMoney
						}]
					},
					preferentialMoney: {
						rules: [{
							required: true,
							errorMessage: '满减金额不能为空',
						}, {
							validateFunction: checkPreferentialMoney
						}]
					},
					start: {
						rules: [{
							required: true,
							errorMessage: '开始时间不能为空',
						}, {
							validateFunction: checkStart
						}]
					},
					end: {
						rules: [{
							required: true,
							errorMessage: '结束时间不能为空',
						}, {
							validateFunction: checkEnd
						}]
					},
					num: {
						rules: [{
							required: true,
							errorMessage: '投放数量',
						}, {
							validateFunction: checkNum
						}]
					}
				},

			}
		},
		methods: {
			//选择开始时间
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			// 触发提交表单
			submit() {
				console.log(this.formData);
				if (this.formData.type == "满减券") {
					this.formData.discount = null;
				} else {
					this.formData.triggerMoney = null;
					this.formData.preferentialMoney = null;
				}
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.add();
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			//请求新增
			add() {
				uni.request({
					url: 'http://localhost:7000/business/couponReal',
					data: this.formData,
					method: 'POST',
					header: {
						authorization: getApp().globalData.token
					},
					success: (resp) => {
						if (resp.data.code == 200) {
							uni.navigateTo({
								url: "/pages/card/card"
							})
						} else {
							uni.showToast({
								title: '服务器繁忙',
								icon: 'none'
							})
						}
					},
					fail: (resp) => {

					}
				})
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
	}
</script>

<style scoped>
	.body {
		height: 100vh;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		background-color: white;
	}

	/deep/ .uni-forms-item__label {
		width: 200rpx !important;
	}

	/* 满减 打折*/
	.uni-forms {
		position: relative;
	}

	.full_reduction,
	.discount {
		position: absolute;
		right: 30rpx;
	}


	/deep/ .full_reduction .uni-easyinput__content-input,
	/deep/ .discount .uni-easyinput__content-input {
		height: 30rpx !important;
	}



	.full_reduction>view,
	.discount>view {
		width: 170rpx;
		text-align: center;
		vertical-align: bottom;
		display: inline-block;
	}

	button {
		width: 652rpx;
		height: 88rpx;
		color: rgba(29, 111, 255, 1);
		font-size: 28rpx;
		line-height: 88rpx;
		border-radius: 8rpx;
		border: 1px solid rgba(29, 111, 255, 1);
	}
</style>